<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>第七感觉百货--大转盘抽奖活动</title>
<link rel="stylesheet" href="__STATIC__/css/bootstrap.min.css">
<link rel="stylesheet" href="__STATIC__/css/style-cj.css">
</head>
<body>
<div class="main">
  <div class="banner"><img src="__STATIC__/images/draw/banner-cj.jpg"/></div>
  <div class="main-header">
  <p>{$draw.title}</p>
  <p class="p1">您有<span class="coud_num">{$remain_act_count}</span> 次机会</p>
  </div>
  <div class="main-body">
     <div id="zhuanpan">
          <img id="img" class="rotary-table" src="__STATIC__/images/draw/four_zhuanpan.png">
          <img id="tip" class="point i_cont" src="__STATIC__/images/draw/Pointer1.png" >
      </div>
  </div>

  <div class="main-footer"><a href="{:U('Draw/draw_list')}" class="footer-a2">中奖记录>></a><a href="#" class="footer-a" data-toggle="modal" data-target="#myModal">活动规则>></a></div> 
  
</div>
		<!-- 30元话费 -->
			<div id="apply1" class="modal fade padding1" tabindex="-1" data-replace="true" data-backdrop="static" >
				<div class="modal-dialog modal-content">
					<div class="modal-body">
					   <div class="img1"><img src="__STATIC__/images/draw/30yuanhuafei.png"/></div>
                       <p><span>奖品将于次月10日前到账，请留意查收！</span></p>
                       <a href="#" class="colse1" data-dismiss="modal"></a>
                       <button type="button" class="but5" data-dismiss="modal" data-toggle="modal" id="addCard">确定</button>
					</div>
				</div>
			</div>
            
		<!--100M省内流量 -->
			<div id="apply2" class="modal fade padding1" tabindex="-1" data-replace="true" data-backdrop="static" >
				<div class="modal-dialog modal-content">
					<div class="modal-body">
					   <div class="img1"><img src="__STATIC__/images/draw/100Mshengneiliuliang.png"/></div>
                        <p><span>奖品将于次月10日前到账，请留意查收！</span></p>
                       <a href="#" class="colse1" data-dismiss="modal"></a>
                       <button type="button" class="but5" data-dismiss="modal" data-toggle="modal" id="">确定</button>
					</div>
				</div>
			</div>
            
       	<!--500M省内流量 -->
			<div id="apply3" class="modal fade padding1" tabindex="-1" data-replace="true" data-backdrop="static">
				<div class="modal-dialog modal-content">
					<div class="modal-body">
					   <div class="img1"><img src="__STATIC__/images/draw/500Mshengneiliuliang.png"/></div>
                       <p><span>奖品将于次月10日前到账，请留意查收！</span></p>
                       <a href="#" class="colse1" data-dismiss="modal"></a>
                       <button type="button" class="but5" data-dismiss="modal" data-toggle="modal" id="">确定</button>
					</div>
				</div>
			</div>
            
            
         	<!--300M省内流量 -->
			<div id="apply4" class="modal fade padding1" tabindex="-1" data-replace="true" data-backdrop="static">
				<div class="modal-dialog modal-content">
					<div class="modal-body">
					   <div class="img1"><img src="__STATIC__/images/draw/300Mshengneiliuliang.png"/></div>
                        <p><span>奖品将于次月10日前到账，请留意查收！</span></p>
                       <a href="#" class="colse1" data-dismiss="modal"></a>
                       <button type="button" class="but5" data-dismiss="modal" data-toggle="modal" id="">确定</button>
					</div>
				</div>
			</div>
<!--加载-->
	<div id="applyLoading" class="modal fade" tabindex="-1" data-replace="true"  data-backdrop="static" >
				<div class="modal-dialog modal-content">
					<div class="modal-body">
						<div class="loading-container" align="center">
							<img src="__STATIC__/images/draw/ajax-loader.gif" alt="Loading" class="loading-gif">
						</div>
						<p align="center">后台在努力加载，稍等一会儿哦~</p>
					</div>
				</div>
	</div>

<!-- 温馨提示 -->
<div id="myModal" class="modal fade s3" tabindex="-1" data-replace="true" data-backdrop="static">
  <div class="modal-dialog">
      <div class="hd-title"></div>
      <a href="#" class="close2"></a>
      <div class="modal-body" style="height: 250px; overflow: auto;">{$draw.content}</div>
  
  </div>
</div>
<include file="public/wx_share"/>
<script src="__STATIC__/js/jquery-1.10.2.min.js"></script> 
<script src="__STATIC__/js/bootstrap.min.js"></script>  


<script type="text/javascript">

   /* 获取抽奖机会值*/
    var nun1=$(".coud_num").html();
		// 转盘样式，a：旋转角度，p：概率（1代表100%），t：需要显示的其它信息（文案or分享）
		var result_angle = [{a:0,p:0.1,l:0,t:'30元话费'},{a:45,p:0.1,l:1,t:'500M省内流量'},{a:90,p:0.1,l:2,t:'100M省内流量'},{a:135,p:0.3,l:3,t:'300M省内流量'},{a:180,p:0.1,l:0,t:'30元话费'},{a:225,p:0.1,l:1,t:'500M省内流量'},{a:270,p:0.1,l:2,t:'100M省内流量'},{a:315,p:0.1,l:3,t:'300M省内流量'}];
		var rotate = {
			rotate_angle : 0, //起始位置为0
			flag_click : true, //转盘转动过程中不可再次触发
			calculate_result:function(type,during_time){
						var self = this;
						type = type || 0; // 默认为箭头转动
						during_time = during_time || 1; // 默认为1s

						var rand_num = Math.ceil(Math.random() * 100); // 用来判断的随机数，1-100

						var result_index; // 最终要旋转到哪一块，对应result_angle的下标
						var start_pos = end_pos = 0; // 判断的角度值起始位置和结束位置

						for(var i in result_angle){
							start_pos = end_pos + 1; // 区块的起始值
							end_pos = end_pos + 100 * result_angle[i].p; // 区块的结束值

							if(rand_num >= start_pos && rand_num <= end_pos){ // 如果随机数落在当前区块，那么获取到最终要旋转到哪一块
								result_index = i;
								break;
							}
						}

						var rand_circle = Math.ceil(Math.random() * 2) + 1; // 附加多转几圈，2-3

						self.flag_click = false; // 旋转结束前，不允许再次触发
						if(type == 1){ // 转动盘子
							self.rotate_angle =  self.rotate_angle - rand_circle * 360 - result_angle[result_index].a - self.rotate_angle % 360;
							$('#img').css({
								'transform': 'rotate('+self.rotate_angle+'deg)',
								'-ms-transform': 'rotate('+self.rotate_angle+'deg)',
								'-webkit-transform': 'rotate('+self.rotate_angle+'deg)',
								'-moz-transform': 'rotate('+self.rotate_angle+'deg)',
								'-o-transform': 'rotate('+self.rotate_angle+'deg)',
								'transition': 'transform ease-out '+during_time+'s',
								'-moz-transition': '-moz-transform ease-out '+during_time+'s',
								'-webkit-transition': '-webkit-transform ease-out '+during_time+'s',
								'-o-transition': '-o-transform ease-out '+during_time+'s'
							});
						}else{ // 转动指针
							self.rotate_angle = self.rotate_angle + rand_circle * 360 + result_angle[result_index].a - self.rotate_angle % 360;
							$('.i_cont').css({
								'transform': 'rotate('+self.rotate_angle+'deg)',
								'-ms-transform': 'rotate('+self.rotate_angle+'deg)',
								'-webkit-transform': 'rotate('+self.rotate_angle+'deg)',
								'-moz-transform': 'rotate('+self.rotate_angle+'deg)',
								'-o-transform': 'rotate('+self.rotate_angle+'deg)',
								'transition': 'transform ease-out '+during_time+'s',
								'-moz-transition': '-moz-transform ease-out '+during_time+'s',
								'-webkit-transition': '-webkit-transform ease-out '+during_time+'s',
								'-o-transition': '-o-transform ease-out '+during_time+'s'
							});
						}
						// 旋转结束后，允许再次触发
						setTimeout(function(){ 
							self.flag_click = true;
							// 告诉结果
							if(result_angle[result_index].t=="30元话费")
							{
									$('#apply1').modal('show');
									
							}else if(result_angle[result_index].t=="100M省内流量"){
									$('#apply1').modal('show');
								
							}else if(result_angle[result_index].t=="500M省内流量"){
									$('#apply1').modal('show');
									
							}else{
									$('#apply1').modal('show');
									
							}

							//保存抽奖结果
							var prize_name=result_angle[result_index].t;
							var prize_level=result_angle[result_index].l;
							$.post('{:U("Draw/index")}',{id:'{$id}',prize_name:prize_name,prize_level:prize_level},function(res){

							})
							
							
							nun1--;
							$(".coud_num").html(nun1);
							if(parseInt(nun1)<= 0){
								$("#tip").attr("src","__STATIC__/images/draw/Pointer2.png");
					             return false;
				            }
							
						},during_time*1000);
			},
		}

	$(document).ready(function(){
		  $('#tip').click(function(){
			if(parseInt(nun1)<= 0){
				$("#tip").attr("src","__STATIC__/images/draw/Pointer2.png");
				return false;
			}
				if(rotate.flag_click){ // 旋转结束前，不允许再次触发
					rotate.calculate_result(1,1);
				}
			});
					
	 });
		
		
$(".close2").click(function(){
		 $('#myModal').modal('hide');
});


</script>  
</body>
</html>